<template>
  <div class='member-add-wrapper'>
    <div class='member-add-box'>
      <div class='box-header'>{{title}}</div>
      <div class='box-body'>
        <section class='body-item'>
          <div class='body-item-title' v-if='!useTagMode'>
            <span class='mode-item'>选择</span>
          </div>
          <!-- <div class='body-item-title' v-if='useTagMode'>
            <span class='mode-item' :class='{active: mode === "dept"}' @click='selectMode("dept")'>通讯录</span>
            <span class='mode-item' :class='{active: mode === "tag"}' @click='selectMode("tag")'>标签</span>
          </div> -->
          <!-- 通讯录模式 -->
          <div class='body-item-content' v-loading='loading'>
            <!-- 搜索 -->
            <div class='search-box'>
              <el-input class='search-input'
                type="text"
                v-model.trim='keyword'
                placeholder="搜索"
                @change='filterKeyword'>
              </el-input>
            </div>
            <!-- 结构列表 -->
            <div class='org-list' >
              <!-- <li class='org-item' v-for='(org, index) of realDataList' :key='"org" + index'>
                <div class='org-name'>
                  <span class='icon-select'
                        :class='{selected: org.isSelected, disabled: org.notSelectable}'
                        @click='toggleSelect(org, index)'
                        v-show='!onlyEmp || (onlyEmp && !org.children)'>
                  </span>
                  <span v-show='mode === "dept"' class='icon-dept' :class='{"icon-empl": !org.children}'>{{org[KEY_NAME]}}</span>
                  <span v-show='mode === "tag"' class='icon-tag'>{{org[KEY_NAME]}}</span>
                </div>
                <div class='children-btn'
                     v-show="(mode === 'dept' && org.children) || // 只要是部门，就显示下级按钮, 标签必须有子标签，才显示下级按钮
                             (mode === 'tag' && org.children && org.children[0])">
                  <span class='btn' @click='showChildren(org)'>下级</span>
                </div>
              </li> -->
              <!-- <el-tree
                class="deptsTree"
                :data="deptsTreeData"
                node-key="deptId"
                :default-expanded-keys="[currentDeptId]"
                @node-click="openDeptDetails"
                :expand-on-click-node="false"
                :props="defaultProps1">
                <div class="custom-tree-node" slot-scope="{ node, data }"  :class="{active: data.deptId === currentDeptId}">
                  <span>{{ node.label }}</span>
                </div>
              </el-tree> -->
              <div class="org-inner" v-if='showList'>
                <el-checkbox :label="item[keyName]" @change='chooseItem(item)' :checked='item[keyName] in chooseData' v-for='item in tableData' :key='item[keyName]' >{{item.nickName}}</el-checkbox>
              </div>
            </div>
            <div class="page-wrap" v-show='showPage'>
              <el-pagination
                class='el-page'
                small
                :pager-count='5'
                :page-size="pageSize"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </section>
        <section class='body-item'>
          <div class='body-item-title'>已选</div>
          <div class='body-item-content'>
            <div class='members-list' v-if='showList'>
                <!-- <el-checkbox-group v-model="chooseList"> -->
                <el-checkbox :label="key" @change='chooseItem({ [keyName]: key})' :checked='key in chooseData' v-for='(val,key) in chooseData' :key='key' >{{val}}</el-checkbox>
                <!-- </el-checkbox-group> -->
              <!-- <li class='members-item' v-for='(member, index) of members' :key='"member" + index'>
                <span :class='{
                  "item-name": member.type === 1 || member.type === 2,
                  "item-tag": member.type === 3,
                  empl: member.type === 2
                }'>
                  {{member[KEY_NAME]}}
                </span>
                <span class='item-del' @click='delOneMember(index)'></span>
              </li> -->
            </div>
          </div>
        </section>
      </div>
      <div class='box-footer'>
        <span class='footer-btn active' @click='confirm'>确定</span>
        <span class='footer-btn' @click='cancel'>取消</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'memberAdd',
  data () {
    return {
      chooseList: [],
      currentPage: 1,
      tableData: [],
      currentDepartmentStaff: [],
      members: [], // 添加的成员
      originData: [], // 用于展示的原始数据
      originDepts: [], // 通讯录结构数据
      originTags: [], // 标签结构数据
      dataList: [], // 当前组织结构列表
      realDataList: [], // 用于展示的组织结构列表，过滤搜索关键词
      keyword: '',
      navList: [],
      loading: false,
      mode: 'dept',
      KEY_ID: 'deptId',
      KEY_NAME: 'deptName',
      currentDeptId: '',
      defaultProps1: {
        children: 'children',
        label: 'deptName'
      },
      showList: true,
      pageSize: 10,
      total: 0,
      deptsTreeData: [],
      chooseData: {},
      showPage: false
    }
  },
  props: {
    // 显示的标题
    title: {
      type: String,
      default: '选择审核人员'
    },
    // 被添加的成员数组
    selectedMembers: {
      type: Object,
      default () {
        return {}
      }
    },
    keyName: {
      type: String,
      default: 'openid'
    },
    // 是否只能选员工
    onlyEmp: {
      type: Boolean,
      default: false
    },
    // 是否只能选择一个成员
    onlySelectOne: {
      type: Boolean,
      default: false
    },
    // 是否开启标签选择模式（默认开启）
    useTagMode: {
      type: Boolean,
      default: true
    },
    // 当前的应用信息
    agentInfo: {
      type: Object,
      default () {
        return {}
      }
    },
    // 使用的接口需求模式, 可选值如下：
    // cp-all 用于企业微信获取所有部门、人员和全局标签
    // cp-app-usable 用于企业微信应用内，设置使用范围，获取可见范围过滤后的部门、人员、全局标签 和 所有应用自己的标签
    // cp-app-addMember 用于企业微信应用内，添加应用内成员， 获取可见范围过滤后的部门、人员、全局标签
    apiMode: {
      type: String,
      default: 'cp-all'
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.page = val
      this.getFans()
    },
    getFans () {
      if (!sessionStorage.getItem('wechatId')) {
        this.showWarning('请先绑定公众号')
        return false
      }
      this.loading = true
      let appid = sessionStorage.getItem('appid')
      let url = `${this.SERVICE_WECHAT}/fans/${appid}/list`
      let param = {
        wechatId: sessionStorage.getItem('wechatId'),
        pageSize: this.pageSize,
        currentPage: this.page,
        subscribe: 1,
        searchKey: this.keyword || ''
      }
      this.get(url, param).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          let data = res.data.data
          if (data) {
            this.total = +data.total
            this.showPage = this.total > this.pageSize
            if (data.list && data.list.length) {
              this.tableData = data.list
            } else {
              this.tableData = []
            }
          } else {
            this.tableData = []
          }
        }
      }).catch(e => {
        this.loading = false
        this.handleError(e)
      })
    },
    // ----------------- 以下为部门选择列表方法 --------------------
    // 切换列表显示的模式
    selectMode (type) {
      this.mode = type
      if (type === 'dept') {
        this.originData = JSON.parse(JSON.stringify(this.originDepts))
      } else if (type === 'tag') {
        this.originData = JSON.parse(JSON.stringify(this.originTags))
      }
      // 展示第一层组织架构列表
      this.showOrgListById('-1')
    },
    chooseItem (val) {
      // let index = this.chooseList.indexOf(val.userId)
      if (this.chooseData[val[this.keyName]]) {
        // this.chooseList.splice(index, 1)
        delete this.chooseData[val[this.keyName]]
      } else {
        // this.chooseList.push(val.userId)
        this.chooseData[val[this.keyName]] = val.nickName
      }
      this.showList = false
      this.$nextTick(() => {
        this.showList = true
      })
    },
    // 确认添加的成员
    confirm () {
      // let finalMember = []
      // this.members.forEach(member => {
      //   let newMember = {}
      //   newMember[this.KEY_ID] = member[this.KEY_ID]
      //   newMember[this.KEY_NAME] = member[this.KEY_NAME]
      //   newMember.type = member.type
      //   finalMember.push(newMember)
      // })
      this.$emit('confirm', this.chooseData, this.chooseList)
    },
    openDeptDetails (value) {
      // if (value.parentId === '-1' || value.parentId === '0') {
      //   this.isTopDept = true
      // } else {
      //   this.isTopDept = false
      // }
      this.currentDeptId = value.deptId
      this.currentDeptCode = value.deptCode
      this.currentDeptInfo = value
      // this.page = 1
      // this.updateCurrentDept()
      this.getCurrentDepartmentStaff()
    },
    updateCurrentDept () {
      this.currentDept.deptId = this.currentDeptInfo.deptId
      this.currentDept.deptName = this.currentDeptInfo.deptName
      this.currentDept.parentId = this.currentDeptInfo.parentId
      this.currentDept.ordinal = this.currentDeptInfo.ordinal
      if (this.currentDept.parentId === '-1' || this.currentDept.parentId === '0') {
        this.isCurrentTopDept = true
      } else {
        this.isCurrentTopDept = false
        // 得到所有的上级部门
        this.deptsCascaderData = this.copyChildren(this.deptsTreeData, this.currentDept.deptId)
        if (this.getParent(this.deptsCascaderData, this.currentDept.parentId)) {
          this.currentDept.deptParentIds = this.getParent(this.deptsCascaderData, this.currentDept.parentId).reverse()
        }
      }
    },
    // 根据搜索关键词筛选当前层级的列表
    filterKeyword () {
      // this.getCurrentDepartmentStaff()
      this.page = 1
      this.getFans()
    },
    // 从已选列表删除成员
    delOneMember (index) {
      let delMember = this.members.splice(index, 1)[0]
      // 如果当前的组织列表中包含此成员，需要改为未选中状态
      let matchedOrg = this.dataList.filter(org => org[this.KEY_ID] === delMember[this.KEY_ID])[0]
      if (matchedOrg) {
        matchedOrg.isSelected = false
      }
    },
    // 展示当前组织的下级组织结构列表
    showChildren (org) {
      // 如果是通讯录模式，则获取下级部门及人员
      if (this.mode === 'dept') {
        // 如果该部门没有获取下面的员工， 则先获取员工
        this.loading = true
        let url = ''
        // 获取部门下所有的员工
        if (this.apiMode === 'cp-all') {
          url = `${this.SERVICE_CP}/dept/${org[this.KEY_ID]}/emp/list2`
        // 获取部门下，应用可见的员工
        } else if (this.apiMode === 'cp-app-usable' || this.apiMode === 'cp-app-addMember') {
          url = `${this.SERVICE_CP}/dept/${this.agentInfo.agentId}/${org[this.KEY_ID]}/available/emp/list?notSelectable=${org.notSelectable}`
        }
        this.get(url).then(res => {
          this.loading = false
          if (res.data.code === 200) {
            if (res.data.data && res.data.data[0]) {
              let newEmpList = []
              res.data.data.forEach(emp => {
                let newEmp = {}
                newEmp[this.KEY_ID] = emp.userId
                newEmp[this.KEY_NAME] = emp.name
                newEmp.isSelected = false
                newEmpList.push(newEmp)
              })
              org.children = newEmpList.concat(org.children)
            }
            this.dataList = org.children
            this.updateOrgListSelect()
            let newNav = {}
            newNav[this.KEY_ID] = org[this.KEY_ID]
            newNav[this.KEY_NAME] = org[this.KEY_NAME]
            this.navList.push(newNav)
          }
        }).catch(e => {
          this.loading = false
          this.handleError(e)
        })
      // 如果是标签模式，直接显示下级标签
      } else if (this.mode === 'tag') {
        this.dataList = org.children
        this.updateOrgListSelect()
        let newNav = {}
        newNav[this.KEY_ID] = org[this.KEY_ID]
        newNav[this.KEY_NAME] = org[this.KEY_NAME]
        this.navList.push(newNav)
      }
    },
    // 点击组织列表， 选择或取消选择成员
    toggleSelect (org, index) {
      // 首先判断当前选项是否可选
      if (org.notSelectable) {
        return false
      }
      org.isSelected = !org.isSelected
      // 如果是选中组织项，且之前没有添加，则在右侧已选列表添加此项
      if (org.isSelected) {
        if (!this.members.filter(member => member[this.KEY_ID] === org[this.KEY_ID])[0]) {
          let newMember = {}
          newMember[this.KEY_ID] = org[this.KEY_ID]
          newMember[this.KEY_NAME] = org[this.KEY_NAME]
          if (org.children) {
            newMember.children = org.children
          }
          // 添加选择的结果类型
          if (this.mode === 'dept') {
            if (org.children) {
              newMember.type = 1
            } else {
              newMember.type = 2
            }
          } else if (this.mode === 'tag') {
            newMember.type = 3
          }
          // 如果只能添加一个成员，先清空已选成员
          if (this.onlySelectOne) {
            this.members = []
            this.dataList.forEach(item => {
              if (item[this.KEY_ID] !== org[this.KEY_ID]) {
                item.isSelected = false
              }
            })
          }
          this.members.push(newMember)
        }
      // 如果是取消选中， 则需要再右侧已选列表中删除此项
      } else {
        let delIndex = -1
        this.members.forEach((member, index) => {
          if (member[this.KEY_ID] === org[this.KEY_ID]) {
            delIndex = index
          }
        })
        if (delIndex !== -1) {
          this.members.splice(delIndex, 1)
        }
      }
    },
    cancel () {
      this.$emit('cancel')
    },
    // 根据右侧已选的成员，回显组织列表的选中样式
    updateOrgListSelect () {
      this.dataList.forEach(item => {
        let isSelected = this.members.filter(member => {
          if (member[this.KEY_ID] === item[this.KEY_ID]) {
            if (member.type === 1 || member.type === 2) {
              return this.mode === 'dept'
            } else if (member.type === 3) {
              return this.mode === 'tag'
            } else {
              return false
            }
          }
          return false
        })[0]
        item.isSelected = !!isSelected
      })
      this.filterKeyword()
    },
    // 根据组织结构id, 显示对应的组织列表
    showOrgListById (id) {
      // 同步面包屑导航显示
      this.updateNavList(id)
      if (id === '-1') {
        this.dataList = JSON.parse(JSON.stringify(this.originData))
        // 根据右侧已选的成员，回显组织列表的选中样式
        this.updateOrgListSelect()
      } else {
        this.dataList = JSON.parse(JSON.stringify(this.getOrgsbyId(this.originData, id)))
        // 如果是通讯录模式，需要获取当前部门下的员工
        if (this.mode === 'dept') {
          let url = ''
          // 获取部门下所有的员工
          if (this.apiMode === 'cp-all') {
            url = `${this.SERVICE_CP}/dept/${id}/emp/list2`
          // 获取部门下，应用可见的员工
          } else if (this.apiMode === 'cp-app-usable' || this.apiMode === 'cp-app-addMember') {
            url = `${this.SERVICE_CP}/dept/${this.agentInfo.agentId}/${id}/available/emp/list`
          }
          this.get(url).then(res => {
            if (res.data.code === 200) {
              if (res.data.data && res.data.data[0]) {
                let newEmpList = []
                res.data.data.forEach(emp => {
                  let newEmp = {}
                  newEmp[this.KEY_ID] = emp.userId
                  newEmp[this.KEY_NAME] = emp.name
                  newEmp.isSelected = false
                  newEmpList.push(newEmp)
                })
                this.dataList = newEmpList.concat(this.dataList)
              }
              // 根据右侧已选的成员，回显组织列表的选中样式
              this.updateOrgListSelect()
            }
          }).catch(e => {
            this.handleError(e)
          })
        // 如果是标签模式，则直接显示
        } else {
          // 根据右侧已选的成员，回显组织列表的选中样式
          this.updateOrgListSelect()
        }
      }
    },
    // 递归获取id对应的组织数组
    getOrgsbyId (list, id) {
      let dataList = []
      let length = list.length
      for (let i = 0; i < length; i++) {
        if (list[i][this.KEY_ID] === id) {
          dataList = list[i].children || []
          break
        } else if (list[i].children && list[i].children[0]) {
          dataList = this.getOrgsbyId(list[i].children, id)
          if (dataList && dataList[0]) {
            break
          }
        }
      }
      return dataList || []
    },
    // 更新面包屑导航展示数据
    updateNavList (id) {
      // 点击通讯录
      if (id === '-1') {
        this.navList = []
      } else {
        let delIndex = -1
        this.navList.forEach((item, index) => {
          if (item[this.KEY_ID] === id) {
            delIndex = index
          }
        })
        if (delIndex !== -1) {
          this.navList = this.navList.slice(0, delIndex + 1)
        }
      }
    },
    // 初始化所有层级数据，添加 isSelected 用于显示选中交互
    initSelectedOrgs (tree) {
      let length = tree.length
      for (let i = 0; i < length; i++) {
        tree[i].isSelected = true
        if (tree[i].children && tree[i].children[0]) {
          this.initSelectedOrgs(tree[i].children)
        }
      }
    },
    getDeptsTree () {
      let url = ''
      // 获取所有的部门
      if (this.apiMode === 'cp-all') {
        url = `${this.SERVICE_CP}/dept/list`
      // 获取应用可见范围相关的部门
      } else if (this.apiMode === 'cp-app-usable' || this.apiMode === 'cp-app-addMember') {
        url = `${this.SERVICE_CP}/dept/${this.agentInfo.agentId}/available/list`
      }
      this.get(url).then(res => {
        if (res.data.code === 200) {
          if (res.data.data && res.data.data[0]) {
            this.originDepts = res.data.data
            // 给组织结构所有层次加上isSelected关键词
            this.initSelectedOrgs(this.originDepts)
            // 默认展示的是通讯录模式
            this.originData = JSON.parse(JSON.stringify(this.originDepts))
            // 展示第一层组织架构列表
            this.showOrgListById('-1')
          } else {
            this.originDepts = []
          }
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    // 获取标签列表
    getTagsTree () {
      // 获取所有的全局标签标签
      if (this.apiMode === 'cp-all') {
        let url = `${this.SERVICE_CP}/tag/list`
        this.get(url).then(res => {
          if (res.data.code === 200) {
            if (res.data.data && res.data.data[0]) {
              this.originTags = res.data.data
              // 统一标签结构的key为KEY_ID, KEY_NAME
              this.initTagKeys(this.originTags)
              // 给组织结构所有层次加上isSelected关键词
              this.initSelectedOrgs(this.originTags)
            } else {
              this.originTags = []
            }
          }
        }).catch(e => {
          this.handleError(e)
        })
      // 获取应用下可见范围相关的全局标签 和 所有应用自己的标签
      } else if (this.apiMode === 'cp-app-usable') {
        // 先获取可见范围过滤的全局标签
        let url = `${this.SERVICE_CP}/tag/${this.agentInfo.agentId}/available/list`
        this.get(url).then(res => {
          if (res.data.code === 200) {
            let originTags = []
            if (res.data.data && res.data.data[0]) {
              originTags = res.data.data
            }
            // 再获取应用下的所有标签
            let url2 = `${this.SERVICE_CP}/agent/tag/${this.agentInfo.agentId}/list`
            this.get(url2).then(res => {
              if (res.data.code === 200) {
                if (res.data.data && res.data.data[0]) {
                  originTags = originTags.concat(res.data.data)
                }
                this.originTags = originTags
                // 统一标签结构的key为KEY_ID, KEY_NAME
                this.initTagKeys(this.originTags)
                // 给组织结构所有层次加上isSelected关键词
                this.initSelectedOrgs(this.originTags)
              }
            }).catch(e => {
              this.handleError(e)
            })
          }
        }).catch(e => {
          this.handleError(e)
        })
      // 只获取应用下可见范围相关的全局标签
      } else if (this.apiMode === 'cp-app-addMember') {
        let url = `${this.SERVICE_CP}/tag/${this.agentInfo.agentId}/available/list`
        this.get(url).then(res => {
          if (res.data.code === 200) {
            let originTags = []
            if (res.data.data && res.data.data[0]) {
              originTags = res.data.data
            }
            this.originTags = originTags
            // 统一标签结构的key为KEY_ID, KEY_NAME
            this.initTagKeys(this.originTags)
            // 给组织结构所有层次加上isSelected关键词
            this.initSelectedOrgs(this.originTags)
          }
        }).catch(e => {
          this.handleError(e)
        })
      }
    },
    // 在数据结构中，将id, name统一为 KEY_ID, KEY_NAME
    initTagKeys (tree) {
      let length = tree.length
      for (let i = 0; i < length; i++) {
        tree[i][this.KEY_ID] = tree[i].tagId
        tree[i][this.KEY_NAME] = tree[i].tagName
        if (tree[i].children && tree[i].children[0]) {
          this.initTagKeys(tree[i].children)
        }
      }
    },
    handleTreeUnique (list) {
      list.forEach((ele, index) => {
        ele.listId = ele.createTime + index + ele.deptId
        if (ele.children.length > 0) {
          this.handleTreeUnique(ele.children)
        }
      })
      return list
    },
    fetchDepartmentList () {
      this.loading = true
      // let url = `/org/dept/list`
      let url = `${this.SERVICE_CP}/dept/list`
      this.get(url).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          if (res.data.data && res.data.data[0]) {
            let arr1 = JSON.parse(JSON.stringify(res.data.data))
            // let arr2 = JSON.parse(JSON.stringify(res.data.data))
            this.deptsTreeData = this.handleTreeUnique(arr1)
            this.deparOptions = []
            // this.unitDepts(arr2)
            this.currentDeptInfo = this.deptsTreeData[0]
            // this.updateCurrentDept()
            // if (this.currentDeptInfo.parentId === '-1' || this.currentDeptInfo.parentId === '0') {
            //   this.isTopDept = true
            // }
            this.currentDeptId = this.deptsTreeData[0].deptId
            this.currentDeptCode = this.deptsTreeData[0].deptCode
            this.getCurrentDepartmentStaff()
            // this.deptIdIn = this.deptsTreeData[0].deptId
            // this.getDepartmentStaffIn()
          }
        }
      }).catch(e => {
        this.loading = false
        this.handleError(e)
      })
    },
    getCurrentDepartmentStaff () {
      let param = {
        currentPage: this.page,
        pageSize: this.pageSize,
        name: this.keyword ? this.keyword : '',
        status: 'ENABLE'
      }
      let url = `${this.SERVICE_CP}/dept/${this.currentDeptId}/emp/list`
      this.get(url, param).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          let data = res.data.data
          if (data) {
            this.total = data.total
            this.showPage = this.total > this.pageSize
            if (data.list && data.list.length) {
              this.currentDepartmentStaff = data.list
              // 调整字段名
              this.currentDepartmentStaff.forEach(item => {
                item.userName = item.name
                item.jobTitle = item.position
              })
            } else {
              this.currentDepartmentStaff = []
            }
          } else {
            this.currentDepartmentStaff = []
          }
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    init () {
      // this.members = JSON.parse(JSON.stringify(this.selectedMembers))
      // this.members.forEach(member => {
      //   if (member.type === 1) {
      //     member.children = []
      //   }
      // })
      // 获取到组织结构, 并默认展示组织结构
      // this.getDeptsTree()
      // this.fetchDepartmentList()
      // 如果开启了标签模式，则获取到标签
      // if (this.useTagMode) {
      //   this.getTagsTree()
      // }
    }
  },
  created () {
    this.chooseData = this.selectedMembers
    // this.init()
    this.getFans()
  }
}
</script>

<style lang="stylus" scoped>
.page-wrap
  background-color #fff
  text-align center
  >>> .el-pagination__total
    margin-right 0
    font-size 10px
  >>> .number
    font-size 10px!important
  >>> .btn-prev
    padding-right 0px
  >>> .btn-next
    padding-left 0px
.custom-tree-node
  display flex
  justify-content space-between
  width 100%
  align-items center
  margin 5px 0
  &.active
    color #449EFE
    font-weight 600
  .icon
    margin-right 10px
  .iconfont
    font-size 16px
  .editIcon
    color rgb(189, 189, 189)
    &:hover
      color #606266
  img
    width 18px
    heiht 18px
  >>> .el-tree-node
    margin 10px 0
.deptsTree
  // max-height 640px
  overflow-x hidden
  overflow-y auto
  border-radius 6px
  scroll()
  min-height calc(100% - 50px)
.member-add-wrapper
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  z-index 1000
  background rgba(0,0,0,0.5)
  .member-add-box
    width 704px
    height 554px
    background: #FFFFFF;
    border-radius: 6px;
    overflow hidden
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    margin auto
    display flex
    flex-direction column
    transform translateY(-30px)
    .box-header
      flex none
      height 60px
      line-height 60px
      background: #F1F1F1;
      text-align center
      font-size: 22px;
      color: #22242F;
      no-wrap()
    .box-body
      flex 1
      height 0
      display flex
      justify-content space-between
      padding 0 36px
      .body-item
        width 303px
        display flex
        flex-direction column
        padding-top 20px
        .body-item-title
          margin-bottom 11px
          font-size: 16px;
          color: #22242F;
          .mode-item
            margin-right 10px
            cursor pointer
            &.active
              color #4c84ff
        .body-item-content
          position relative
          // flex 1
          height 373px
          background: #F5F6F8;
          border-radius: 4px;
          .search-box
            padding 11px 10px 0 14px
            .search-input
              display block
              width calc(100% - 37px)
              height: 36px;
              line-height 36px
              border-radius: 3px;
              border: 1px solid #DDDDDD;
              padding-left 37px
              outline none
              font-size: 12px;
              color: #22242F;
              background #FFFFFF url('~assets/img/meeting_ic_search@2x.png') no-repeat left 8px center / 24px 24px
              &::-webkit-input-placeholder
                color #ABACB3
              >>> .el-input__inner
                padding 0
                border none
                font-size 14px
          .breadcrumb-nav
            padding 12px 14px 0
            .breadcrumb-nav-list
              white-space nowrap
              font-size 0
              line-height 16px
              overflow-x auto
              padding-bottom 6px
              &::-webkit-scrollbar
                width 6px
                height 6px
              &::-webkit-scrollbar-thumb
                border-radius 4px
                -webkit-box-shadow inset 0 0 5px rgba(0,0,0,0.2);
                // background #CCE5FF
                background rgba(76, 132, 255, 0.4)
              &::-webkit-scrollbar-tracks
                background transparent
              .nav-root
                display inline-block
                font-size: 14px;
                color: #4C84FF;
                cursor pointer
                vertical-align middle
              .nav-item
                max-width 70px
                display inline-block
                padding-left 18px
                background url('~assets/img/meeting_ic_arrow@2x.png') no-repeat left -1px center / 20px 20px
                font-size: 14px;
                color: #22242F;
                vertical-align middle
                no-wrap()
                .nav-item-text
                  cursor pointer
          .org-list
            padding 10px 13px 13px 14px
            height calc(100% - 56px)
            box-sizing border-box
            .org-inner
              scroll()
              height 100%
              padding-left 16px
              box-sizing border-box
              >>> .el-checkbox
                margin-left 10px
                display block
                line-height 30px
                font-size 16px
                height 29px
              >>> .el-checkbox__label
                font-size 14px
            .org-item
              height 16px
              display flex
              align-items center
              margin-bottom 14px
              .org-name
                width 0
                flex 1
                line-height 18px
                height 18px
                display flex
                align-items center
                .icon-select
                  flex none
                  width 16px
                  height 16px
                  position: relative;
                  border: 1px solid #DCDFE6;
                  border-radius: 2px;
                  box-sizing: border-box;
                  background-color: #FFF;
                  z-index: 1;
                  transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
                  margin-right 8px
                  cursor pointer
                  &.disabled
                    cursor auto
                    &::before
                      content ''
                      position absolute
                      left 0
                      right 0
                      top 0
                      bottom 0
                      z-index 10
                      background rgba(0,0,0,0.1)
                  &.selected
                    background-color: rgba(76, 132, 255, 1);
                    border-color: rgba(76, 132, 255, 1);
                    &::after
                      content ''
                      transform: rotate(45deg) scaleY(1) translate(0px, 0px);
                      border: 2px solid #fff;
                      border-left: 0;
                      border-top: 0;
                      height: 8px;
                      width: 4px;
                      position: absolute;
                      left: 4px;
                      top: 1px
                .icon-dept
                  flex 1
                  no-wrap()
                  color: #22242F;
                  font-size 12px
                  padding-left 18px
                  background url('~assets/img/bumen_backup5@2x.png') no-repeat left -1px top 0 / 16px 16px
                  &.icon-empl
                    background url('~assets/img/yonghu@2x.png') no-repeat left -1px top 0px / 16px 16px
                .icon-tag
                  flex 1
                  no-wrap()
                  color: #22242F;
                  font-size 12px
                  padding-left 18px
                  background url('~assets/img/biaoqian@2x.png') no-repeat left 0 center / 16px 16px
              .children-btn
                flex none
                width 55px
                line-height 18px
                text-align right
                border-left 1px solid rgba(226, 226, 235, 1)
                .btn
                  cursor pointer
                  display inline-block
                  font-size: 12px;
                  color: #4C84FF;
                  padding-left 16px
                  background url('~assets/img/meeting_ic_bumen@2x.png') no-repeat left 0 center / 16px 16px
          .members-list
            padding 16px 14px 10px
            scroll()
            height 100%
            box-sizing border-box
            >>> .el-page
              text-align center
            >>> .el-checkbox
              margin-left 10px
              display block
              height 29px
            >>> .el-checkbox__label
              font-size 14px
            .members-item
              display flex
              align-items center
              margin-bottom 20px
              .item-name
                flex 1
                width 0
                padding-left 21px
                background url('~assets/img/bumen_backup5@2x.png') no-repeat left -1px top -1px / 16px 16px
                font-size: 14px;
                color: #22242F;
                no-wrap()
                &.empl
                  background url('~assets/img/yonghu@2x.png') no-repeat left -1px top -1px / 16px 16px
              .item-tag
                flex 1
                width 0
                font-size: 14px;
                color: #22242F;
                line-height 16px
                no-wrap()
                padding-left 21px
                background url('~assets/img/biaoqian@2x.png') no-repeat left -1px center / 16px 16px
              .item-del
                flex none
                margin-left 10px
                width 14px
                height 14px
                cursor pointer
                background url('~assets/img/meeting_ic_delete@2x.png') no-repeat 0 0 / 14px 14px
    .box-footer
      flex none
      padding 16px 0
      height 42px
      display flex
      justify-content center
      .footer-btn
        width: 84px;
        height: 36px;
        margin-top 6px
        line-height 36px
        background: #FFFFFF;
        border-radius: 6px;
        border: 1px solid #DDDDDD;
        text-align center
        font-size: 16px;
        color: #22242F;
        cursor pointer
        &.active
          margin-right 72px
          background rgba(76, 132, 255, 1)
          border 1px solid rgba(76, 132, 255, 1)
          color #fff
</style>
